<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<template>
  <div class="container">
    <div class="error-page">
      <div class="illustration">
        <svg viewBox="0 0 100 100" class="lock-animation">
          <!-- 锁体 -->
          <rect x="30" y="50" width="40" height="40" rx="5" fill="#2196F3"/>
          <!-- 锁环 -->
          <path d="M50,30 L50,45 Q45,45 45,50 Q45,55 50,55 Q55,55 55,50 Q55,45 50,45"
                fill="none"
                stroke="#0157b4"
                stroke-width="3"/>
          <!-- 动态钥匙孔 -->
          <rect x="47" y="55" width="6" height="10" fill="#ffffff">
            <animate attributeName="opacity"
                     values="1;0.5;1"
                     dur="1.5s"
                     repeatCount="indefinite"/>
          </rect>
          <!-- 禁止标志 -->
          <circle cx="50" cy="50" r="35" fill="none" stroke="#b71c1c" stroke-width="4" stroke-dasharray="4 2"/>
          <line x1="30" y1="30" x2="70" y2="70" stroke="#b71c1c" stroke-width="4">
            <animateTransform attributeName="transform"
                              type="rotate"
                              from="0 50 50"
                              to="360 50 50"
                              dur="4s"
                              repeatCount="indefinite"/>
          </line>
        </svg>
      </div>
      <h1 class="error-title">访问被拒绝</h1>
      <p class="error-message">
        您没有权限访问该资源, 请登录相应权限的账户操作
      </p>
      <button class="home-button" @click="router.push('/')">返回首页</button>
    </div>
  </div>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
}

.error-page {
  text-align: center;
  padding: 2rem;
  max-width: 600px;
}

.illustration {
  margin: 2rem 0;
  position: relative;
}

.lock-animation {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.error-title {
  color: #1a237e;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.error-message {
  color: #424242;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 2rem;
}

.home-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 25px;
  transition: all 0.3s;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(33,150,243,0.3);
}

.home-button:hover {
  background: #1976D2;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(25,118,210,0.4);
}

@media (max-width: 480px) {
  .error-title {
    font-size: 2rem;
  }
  .lock-animation {
    width: 180px;
    height: 180px;
  }
}

/* 添加锁具晃动动画 */
.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
</style>